(function(xmpp){
	function chatPanel(){
		
	}
	var chatP = new chatPanel();
	//小的悬浮窗口
	var im = $("#im");
	
	
	function init(){
		_initParams();
		_initEvent();
	};
	
	function _initParams(){
	
	}
	
	function _initEvent(){
		$("#im").delegate("#im-min-user-head","click",function (){
			var userToolbar = $("#im-user-toolbar");
			var userListPanel = $("#im-user-listPanel");
			userToolbar.fadeOut();
			userListPanel.fadeIn();
		});
		$("#im").delegate("#im-listPanel-zoomin","click",function (){
			var userToolbar = $("#im-user-toolbar");
			var userListPanel = $("#im-user-listPanel");
			userToolbar.fadeIn();
			userListPanel.fadeOut();
		});
		
		//用户列表绑定点击事件
		$("#im-user-friends").delegate(".friend-list","click",function(e){
			
		});
	}
	
	
	
	
	
	
	
	//初始化xmpp基本参数
	xmpp.init({
		BOSH_SERVICE:"/xmpp-httpbind",
		BOSH_SERVICE_IP:"58.215.190.135"
	});
	//登陆服务器
	xmpp.login({name:"1234",password:"1234",callback:function(user){
		var minUserToolbar = $.template(Temp.minUserToolbar,user);
		im.append(minUserToolbar);
		
		var userListPanel = $.template(Temp.userListPanel,user);
		im.append(userListPanel);
		
		init();
	}});
	
	xmpp.listenerHander({
		onMessage:function(msg){
		
		},
		onIq:function(iq){
			var tpl = $.template(Temp.userList,{users:iq});
			$("#im-user-friends").append(tpl);
		},
		onPresence:function(opt){
			console.log(opt.from.jid);
			if(opt.from.id){
				if(opt.type&&opt.type==="unavailable"){
					opt.show="offline";
				}else{
					if(!opt.show){
						opt.show="online";
					}
				}
				$(".status-"+opt.from.id).attr("class","user-status status-"+opt.from.id+" "+opt.show);
			}
			
		}
	});

	//模板
	var Temp={};
	//好友列表
	Temp.userList='\
				<%for(var i=0,n=users.length;i<n;i++){\
				var user = users[i];\
				%>\
				<li class="friend-list" id="friend-list-<%=user.id%>">\
					<div class="jbim_userhead">\
						<img src="pic.png"><span class="jbim_icon_msg_s" ></span>\
						<span class="user-status status-<%=user.id%>"></span>\
					</div>\
					<div class="jbim_username">\
						<%=user.node %> <span title="微博会员"></span>\
					</div>\
				</li>\
				<%}%>\
				';
				
	Temp.minUserToolbar='\
	<div class="min-head" id="im-user-toolbar">\
	 	<span class="user-head" id="im-min-user-head">\
	 		<img alt="" src="pic.png">\
	 		<span class="user-status status-<%=user.id%> online"></span>\
	 	</span>\
		<span class="divider-vertical"></span>\
		<span id="minToolbar-chating">\
	 	</span>\
	</div>\
	'
	
	Temp.userListPanel='\
	<div class="jbim-user" id="im-user-listPanel">\
		<div class="head">\
		 	<span class="user-head">\
		 		<img alt=""  src="pic.png">\
		 		<span class="status-box"><span class="user-status status-<%=user.id%> online"></span>在线</span>\
		 	</span>\
			<span class="divider-vertical"></span>\
			<span class="self-des">今天心情很好。越过越开心</span>\
			<span class="panelControl">\
				<span class="zoomin" id="im-listPanel-zoomin"></span>\
			</span>\
		</div>\
		<div class="im-search">\
			<input>\
		</div>\
		<div class="user-list2">\
			<div class="tabbable">\
				<ul class="imnav imnav-tabs">\
					<li class="users active"><a href="#user1" data-toggle="tab">好友</a></li>\
					<li class="groups"><a href="#user2" data-toggle="tab">群</a></li>\
				</ul>\
				<div class="tab-content">\
					<div class="tab-pane active" id="user1">\
							<div class="jbim_list_group"><ul id="im-user-friends"></ul></div>\
					</div> \
					<div class="tab-pane" id="user2">\
							<div class="jbim_list_group"><ul></ul></div>\
					</div>\
				</div>\
			</div>\
		</div>\
	</div>\
	';
	 
	
	Temp.chatBody='<div class="chat-body">\
              <div class="tabbable tabs-left">\
                    <span class="up"></span>\
                    <ul class="imnav imnav-tabs">\
                        <li ><a href="#tab1" data-toggle="tab">王坤明</a><span class="close"></span> </li>\
                        <li class="active"><a href="#tab2" data-toggle="tab">柳刚</a><span class="close"></span></li>\
                    </ul>\
                    <span class="down"></span>\
               </div>\
				<div class="tab-content">\
					<div class="tab-pane active" id="tab1">\
							<div class="jbim_chat_toolbar">\
								<div class="jbim_chat_toolbarin" >\
									<div class="jbim_face">\
										<a class="jbim_tool_ctrl"><i class="jbim_icon_face"></i>表情</a>\
									</div>\
									<a class="jbim_history" ><span class="jbim_icon_chatdoc"></span>聊天记录</a>\
								</div>\
							</div>\
							<div class="jbim_chat_input">\
								<textarea></textarea>\
							</div>\
							<div class="jbim_chat_btm">\
								<div class="jbim_chat_btmin">\
									<div class="jbim_chat_btm_lf">今夏震撼来袭！</div>\
									<div class="jbim_chat_btm_rt">\
										<p class="jbim_tips_char">\
											<span >200</span><span class="spetxt"></span>\
										</p>\
										<div class="jbim_btn_send">\
											<a class="jbim_btn_publish"  title="发送">发送</a>\
                                            <div class="jbim_btn_choose">\
                                                <a node-type="jbim_btn_choose_a" class="jbim_btn_choose_a">选择</a>\
                                                <ul node-type="jbim_btn_choose">\
                                                    <li class="curr" node-type="jbim_enter_send_li"><span></span><em><a href="javascript:;" node-type="jbim_enter_send">按Enter键发送</a></em></li>\
                                                     <li class="line"><span></span><em></em></li><li node-type="jbim_ctrlenter_send_li" class=""><span></span><em><a href="javascript:;" node-type="jbim_ctrlenter_send">按Ctrl+Enter键发送</a></em></li>\
                                                </ul>\
                                            </div>\
										</div>\
									</div>\
								</div>\
							</div>\
					</div>\
					<div class="tab-pane" id="tab2">\
					</div>\
				</div>\
		</div>';
})(window.xmpp);